<template>
  <div class="item-one" ref="itemOne">
    <div class="title">
      <span>通道管理</span>
      <div>
        <el-button type="primary" @click="channelAdded()">新增通道</el-button>
      </div>
    </div>
    <div class="container">
      <div class="screeningBox">
        <div class="leftBox">
          <div class="leftitem">
            <el-form ref="conditions" :model="conditions" label-width="80px">
              <el-input
                v-model="conditions.channelname"
                placeholder="请输入通道名称"
              ></el-input>
            </el-form>
          </div>
        </div>
        <div class="rightBox">
          <div class="rightitem">
            <el-form ref="conditions" :model="conditions" label-width="80px">
              <el-input
                class="width20"
                v-model="conditions.instNo"
                placeholder="请输入服务商机构号"
              ></el-input>
            </el-form>
          </div>
          <div class="rightitem">
            <el-button
              icon="el-icon-search"
              type="primary"
              @click="searchTargetMonthInfo"
              >搜索</el-button
            >
            <el-button
              icon="el-icon-refresh"
              type="primary"
              @click="resetQuotaData"
              >重置</el-button
            >
          </div>
        </div>
      </div>
      <div class="tableBox">
        <el-table
          ref="multipleTable"
          :data="merchantarr"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          stripe
          :header-cell-style="tableHeaderColor"
        >
          <!-- <el-table-column type="selection" width="55"></el-table-column> -->
          <el-table-column
            align="center"
            type="index"
            label="序号"
          ></el-table-column>
          <el-table-column
            label="通道名称?通道状态"
            align="center"
            width="100"
            :render-header="renderheader"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.channelname }}</div>
              <div>
                <span v-if="scope.row.status == '0'" class="green">
                  {{ "正常" }}
                </span>
                <span v-if="scope.row.status == '1'" class="yellow">
                  {{ "关闭" }}
                </span>
                <span v-if="scope.row.status == '99'" class="hui">
                  {{ "删除" }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="通道类型?通道支付类型"
            width="110"
            :render-header="renderheader"
          >
            <template slot-scope="scope">
              <div>
                {{ scope.row.type == 1 ? "乐收赢" : "第三方" }}
              </div>
              <div>
                {{ scope.row.paytype }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="createtime"
            align="center"
            width="140"
            label="通道入网时间"
          ></el-table-column>
          <!-- <el-table-column
          prop="paytype"
          align="center"
          label="通道支付类型"
        ></el-table-column> -->
          <el-table-column
            label="服务商机构号"
            align="center"
            :render-header="renderheader"
          >
            <template slot-scope="scope">
              <div>
                {{ scope.row.instNo }}
                <i
                  v-if="scope.row.instNo"
                  class="el-icon-copy-document iconmove"
                  @click="copyinstNoFunc(scope.row.instNo)"
                  v-clipboard:copy="copyinstNo"
                  v-clipboard:success="onCopy"
                  v-clipboard:error="onError"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="AES/DES密钥"
            width="120"
            :render-header="renderheader"
          >
            <template slot-scope="scope">
              <div class="context">
                {{ scope.row.instKey
                }}<span
                  class="check"
                  v-if="scope.row.instKey"
                  @click="instKeyBox(scope.row.instKey)"
                  >查看</span
                >
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column
            label="RSA公钥-三方"
            width="120"
            align="center"
            :render-header="renderheader"
          >
            <template slot-scope="scope">
              <div class="expandable">
                <div class="context">
                  {{ scope.row.instPublicKey }}
                  <span
                    class="check"
                    v-if="scope.row.instPublicKey"
                    @click="instPublicKeyBox(scope.row.instPublicKey)"
                    >查看</span
                  >
                </div>
              </div>
            </template>
          </el-table-column> -->
          <el-table-column
            label="是否有进件接口?是否有银行卡支付周期"
            align="center"
            :render-header="renderheader"
          >
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.isEntry == '1'" class="green">{{
                  "是"
                }}</span>
                <span v-if="scope.row.isEntry != '1'" class="hui">{{
                  "否"
                }}</span>
              </div>
              <div>
                <span v-if="scope.row.isCardPay == '1'" class="green">{{
                  "是"
                }}</span>
                <span v-if="scope.row.isCardPay != '1'" class="hui">{{
                  "否"
                }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            label="平台信用卡成本费率(万分比)?平台储蓄卡成本费率(万分比)?平台储蓄卡封顶费用(元)"
            width="200"
            align="center"
            :render-header="renderheader"
          >
            <template slot-scope="scope">
              <div>
                {{ scope.row.platformCreditcardProfitRate }}
              </div>
              <div>
                {{ scope.row.platformDebitcardProfitRate }}
              </div>
              <div>
                {{ (scope.row.platformDebitcardTopFee / 100).toFixed(2) }}
              </div>
            </template>
          </el-table-column>

          <!-- <el-table-column
          label="是否有银行卡支付"
          align="center"
          :render-header="renderheader"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.isCardPay == "1" ? "是" : "否" }}</div>
          </template>
        </el-table-column> -->
          <el-table-column
            prop="settlement"
            align="center"
            label="通道支持结算周期"
          ></el-table-column>
          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            width="120"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="modifyState(scope.row.id)"
                >修改</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="combined"
            :current-page.sync="cur_page"
            @current-change="handleCurrentChange"
            @size-change="sizechange"
          ></el-pagination>
        </div>
      </div>
      <br />
      <br />
      <el-dialog
        title="AES/DES密钥"
        :visible.sync="instKeyVisible"
        width="30%"
        :before-close="handleClose"
      >
        <span
          >{{ instKeyvalue }}
          <i
            class="el-icon-copy-document iconmove check1"
            @click="copyinstKeyvalueFunc(instKeyvalue)"
            v-clipboard:copy="copyinstKeyvalue"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
          />
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="instKeyVisible = false">取 消</el-button>
          <!-- <el-button type="primary" @click="instKeyVisible = false"
          >确 定</el-button
        > -->
        </span>
      </el-dialog>
      <el-dialog
        title="RSA公钥-三方"
        :visible.sync="instPublicKeyVisible"
        width="30%"
        :before-close="handleClose"
      >
        <span
          >{{ instPublicKeyvalue }}
          <i
            class="el-icon-copy-document iconmove check1"
            @click="copyinstPublicKeyvalue(instPublicKeyvalue)"
            v-clipboard:copy="copyinstPublicKeyvalue"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
          />
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="instPublicKeyVisible = false">取 消</el-button>
          <!-- <el-button type="primary" @click="instPublicKeyVisible = false"
          >确 定</el-button
        > -->
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  APIAccessControl,
  APIquotaStatistics,
  merchantlist,
  APIimportFile,
  dictionarylist,
  getservice,
  getBD,
} from "@/api/api";
import { number } from "echarts";
export default {
  name: "quotaPackageStatistics",
  data: function () {
    return {
      modifyDialog: false,
      newobj: {},
      instPublicKeyvalue: "",
      instPublicKeyVisible: false,
      copyinstKeyvalue: "",
      copyinstNo: "",
      copyinstPublicKeyvalue: "",
      instKeyvalue: "",
      instKeyVisible: false,
      token: { token: sessionStorage.getItem("token") },
      modifyStateDialog: false,
      month: new Date(),
      type: "",
      channelType: "",
      exxxx: false,
      cur_page: 1,
      cur_size: 10,
      multipleSelection: [],
      visible: false,
      servicearr: [],
      merchantarr: [],
      combined: 10,
      pageCount: "",
      channelslist: [],
      datainfo: {
        quota: 0,
        availQuota: 0,
        residualQuota: 0,
      },
      tarminal: {
        payLogo: "",
        shopName: "",
        marid: "",
      },
      userinfo: "",
      date: "",
      loading: true,
      conditions: {
        channelname: "",
        instNo: "",
        // servicelevel: "",
        // servicename: "",
        // stardate: "",
        // enddate: "",
        // serviceid: "",
        // aisle: "",
        // shopno: "",
        // BDname: "",
        // keywords: "",
      },
      dimension: "", //选择维度
      tagId: "",
    };
  },
  created() {
    this.userinfo = JSON.parse(sessionStorage.getItem("userInfo"));
    this.dictionarylist();

    this.getQuotaStatisticsList("1");

    if (this.userinfo.rolesId == 1) {
      this.conditions.servicelevel = 1;
      this.servicelevel("1");
    }
    if (this.userinfo.rolesId == 2) {
      this.conditions.servicelevel = 2;
      this.servicelevel("2");
    } else if (this.userinfo.rolesId == 3) {
      this.getBD(this.fid);
    }
  },
  watch: {
    $route: function () {
      if (sessionStorage["refresh"]) {
        this.getQuotaStatisticsList("1");
        this.destroyed()
      }
    },
  },
  methods: {
    destroyed() {
      if (sessionStorage["refresh"]) {
        sessionStorage.removeItem("refresh");
      }
    },
    channelAdded() {
      this.$router.push("/addChannel");
    },
    modifyState(id) {
      this.$router.push("/ModifyChannels");
      sessionStorage.setItem("channel_id", JSON.stringify(id));
    },
    copyinstKeyvalueFunc(item) {
      this.copyinstKeyvalue = item.replace(/^\s+|\s+$/g, "");
    },
    copyinstNoFunc(item) {
      this.copyinstNo = item.replace(/^\s+|\s+$/g, "");
    },
    copyinstPublicKeyvalueFunc(item) {
      this.copyinstPublicKeyvalue = item.replace(/^\s+|\s+$/g, "");
    },
    onCopy: function (e) {
      this.$message({
        message: "复制成功",
        type: "success",
      });
      console.log("复制成功");
    },
    onError: function (e) {
      this.$message.error("复制失败");
      console.log("复制失败");
    },
    instKeyBox(e) {
      console.log(e);
      this.instKeyVisible = true;
      this.instKeyvalue = e;
    },
    instPublicKeyBox(e) {
      console.log(e);
      this.instPublicKeyVisible = true;
      this.instPublicKeyvalue = e;
    },
    renderheader(h, { column, $index }) {
      return h("span", {}, [
        h("span", {}, column.label.split("?")[0]),
        h("br"),
        h("span", {}, column.label.split("?")[1]),
        h("br"),
        h("span", {}, column.label.split("?")[2]),
      ]);
    },
    //修改thead 背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;";
      }
    },

    //批量更新额度包
    queryQuotaPackage() {
      console.log(11112);
    },
    // 获取所有通道type
    dictionarylist() {
      dictionarylist({ type: "channelType", status: 0 }).then((res) => {
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          this.channelslist = res.data;
        }
      });
    },
    successUploadQuota(res, file) {
      if (res.code == 405) {
        sessionStorage.removeItem("token");
        this.$router.push("/login");
      } else if (res.code == 200) {
        this.$message({
          message: "上传成功",
          type: "success",
        });
      } else {
        this.$message.error(res.message);
      }
    },
    //模糊查询商户名
    searchMerchantsList(queryString, cb) {
      let sosolist = {};
      sosolist = {
        page: 1,
        size: 20,
        merchantName: this.tarminal.marid,
      };
      merchantlist(sosolist).then((res) => {
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          this.merchantarrlist = [];
          for (var i = 0; i < res.data.length; i++) {
            this.merchantarrlist.push({
              value: res.data[i].merchantName + " — " + res.data[i].merchantNo,
              id: res.data[i].id,
            });
          }
          let results = queryString
            ? this.merchantarrlist.filter(this.createFilter(queryString))
            : this.merchantarrlist;
          // 调用 callback 返回建议列表的数据
          cb(results);
        }
      });
    },
    getMerchantId(value) {
      if (value == "") {
        this.conditions.keywords = "";
      }
    },
    marid(item) {
      this.conditions.keywords = item.id;
      this.tarminal.shopName = "";
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !==
          -1
        );
      };
    },
    Permission_display(ids = []) {
      return ids.includes(this.userinfo.rolesId);
    },
    roundNumberProperties(array, properties) {
      for (let i = 0; i < array.length; i++) {
        let obj = array[i];
        for (let j = 0; j < properties.length; j++) {
          let property = properties[j];
          if (typeof obj[property] === "number") {
            obj[property] = (obj[property] / 100).toFixed(2);
          }
        }
      }
      return array;
    },
    // 通道列表数据查询
    getQuotaStatisticsList(level) {
      let sosolist = {};
      if (level == 1) {
        sosolist = {
          page: this.cur_page,
          size: this.cur_size,
          // merchantId: this.conditions.keywords,
          // agent1Id: this.conditions.serviceid,
          // channelType: this.channelType,
          // bdId: this.conditions.BDid,
        };
      } else if (level == 2) {
        sosolist = {
          page: this.cur_page,
          size: this.cur_size,
          // merchantId: this.conditions.keywords,
          // agent2Id: this.conditions.serviceid,
          // channelType: this.channelType,
          // bdId: this.conditions.BDid,
        };
      }
      this.newobj = Object.assign(sosolist, this.conditions);
      APIAccessControl(sosolist).then((res) => {
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          let propertiesToRound = ["quota", "availQuota", "residualQuota"];
          this.merchantarr = res.data;
          this.pageCount = res.pageInfo.pageCount;
          this.combined = res.pageInfo.recordCount;
          this.loading = false;
        }
      });
    },
    // 额度包统计（month）
    getQuotaStatistics(level, TargetMonth = "") {
      let currentMonth = new Date().getMonth() + 1;
      if (TargetMonth == currentMonth) TargetMonth = "";
      let checkStatisticaldata = {};
      if (level == 1) {
        checkStatisticaldata = {
          month: TargetMonth,
          merchantId: this.conditions.keywords,
          agent1Id: this.conditions.serviceid,
          channelType: this.channelType,
          bdId: this.conditions.BDid,
        };
      } else if (level == 2) {
        checkStatisticaldata = {
          month: TargetMonth,
          merchantId: this.conditions.keywords,
          agent2Id: this.conditions.serviceid,
          channelType: this.channelType,
          bdId: this.conditions.BDid,
        };
      }

      APIquotaStatistics(checkStatisticaldata).then((res) => {
        if (res.code != 200) {
          this.$message({
            showClose: true,
            message: res.message,
            type: "error",
          });
        } else {
          if (res.data == null) {
            this.datainfo.quota = 0;
            this.datainfo.availQuota = 0;
            this.datainfo.residualQuota = 0;
          } else {
            // this.datainfo = res.data;
            this.datainfo.quota = (res.data.quota / 100).toFixed(2);
            this.datainfo.availQuota = (res.data.availQuota / 100).toFixed(2);
            this.datainfo.residualQuota = (
              res.data.residualQuota / 100
            ).toFixed(2);
          }
        }
      });
    },
    // 服务商级别
    servicelevel(val) {
      this.servicearr = [];
      getservice({
        type: val,
      }).then((res) => {
        for (var i = 0; i < res.data.rows.length; i++) {
          this.servicearr.push({
            value: res.data.rows[i].agentname,
            id: res.data.rows[i].id,
          });
        }
      });
    },
    // 服务商名称
    querySearch(queryString, cb) {
      let sosolist = {};
      sosolist = {
        page: 1,
        size: 20,
        type: this.conditions.servicelevel,
        keywords: this.conditions.servicename,
      };
      getservice(sosolist).then((res) => {
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          this.servicearr = [];
          for (var i = 0; i < res.data.rows.length; i++) {
            this.servicearr.push({
              value: res.data.rows[i].agentname,
              id: res.data.rows[i].id,
            });
          }
          let results = queryString
            ? this.servicearr.filter(this.createFilter(queryString))
            : this.servicearr;
          // 调用 callback 返回建议列表的数据
          cb(results);
        }
      });
    },
    BDid(item) {
      this.conditions.BDid = item.id;
    },
    serviceid(item) {
      this.conditions.serviceid = item.id;
      this.getBD(item.id);
    },
    getBD(id) {
      this.BDarr = [];
      getBD({ agentid: id }).then((res) => {
        console.log(res);
        for (var i = 0; i < res.data.rows.length; i++) {
          this.BDarr.push({
            value: res.data.rows[i].name,
            id: res.data.rows[i].id,
          });
        }
      });
    },
    // 业务经理
    BDname(queryString, cb) {
      let BDarr = this.BDarr;
      let results = queryString
        ? BDarr.filter(this.createFilter(queryString))
        : BDarr;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    //搜索
    searchTargetMonthInfo() {
      this.loading = true;
      this.cur_page = 1;
      if (!this.conditions.servicename) {
        this.conditions.serviceid = "";
      }
      if (!this.conditions.BDname) {
        this.conditions.BDid = "";
      }
      if (this.month.getMonth() + 1 != new Date().getMonth() + 1) {
        if (this.conditions.servicelevel == 1) {
          this.merchantarr = [];
        } else if (this.conditions.servicelevel == 2) {
          this.merchantarr = [];
        } else {
          this.merchantarr = [];
        }
      } else {
        if (this.conditions.servicelevel == 1) {
          this.getQuotaStatisticsList("1");
        } else if (this.conditions.servicelevel == 2) {
          this.getQuotaStatisticsList("2");
        } else {
          this.getQuotaStatisticsList("2");
        }
      }
    },
    // 分页导航
    handleCurrentChange(val) {
      if (this.conditions.servicelevel == 1) {
        this.getQuotaStatisticsList("1");
      } else if (this.conditions.servicelevel == 2) {
        this.getQuotaStatisticsList("2");
      } else {
        this.getQuotaStatisticsList("2");
      }

      this.cur_page = val;
      this.$nextTick(() => {
        document.querySelectorAll(".content")[0].scrollTop = "0";
      });
    },
    // 分页数量
    sizechange(val) {
      this.cur_size = val;
      if (this.conditions.servicelevel == 1) {
        this.getQuotaStatisticsList("1");
      } else if (this.conditions.servicelevel == 2) {
        this.getQuotaStatisticsList("2");
      } else {
        this.getQuotaStatisticsList("2");
      }
      this.$nextTick(() => {
        document.querySelectorAll(".content")[0].scrollTop = "0";
      });
    },
    //重置搜索条件
    resetQuotaData() {
      this.conditions.channelname = "";
      this.conditions.instNo = "";
      this.channelType = "";
      this.conditions.servicename = "";
      this.conditions.serviceid = "";
      this.conditions.servicelevel = "";
      this.conditions.BDname = "";
      this.conditions.BDid = "";
      this.month = new Date();
      this.tarminal.marid = "";
      this.conditions.keywords = "";
      if (this.userinfo.rolesId == 2) {
        this.conditions.servicelevel = 2;
      }
    },
  },
};
</script>

<style scoped lang='less'>
.expandable {
  position: relative;
  overflow: hidden;
}
.context {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 4em;
}
.check {
  color: #01aaef;
  position: absolute;
  bottom: 30px;
  right: 31px;
  // padding: 5px;
  cursor: pointer;
}
.check1 {
  color: #01aaef;
  padding-right: 30px;
  cursor: pointer;
}
.iconmove {
  cursor: pointer;
}
.buttonStyle {
  display: flex;
}
.upload-demo /deep/ .el-upload--text {
  border: 1px dashed #fff;
}
.queryQuota {
  margin-right: 20px;
  width: 115px;
  height: 35px;
}
.upload-demo /deep/ .el-upload--text {
  width: 71px;
  height: 35px;
}
.title {
  background: #fff;
  padding: 10px 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.name {
  width: 25%;
}
.screeningBox {
  width: 100%;
  display: flex;
}
.leftBox,
.rightBox {
  width: 50%;
  padding: 0 15px;
  box-sizing: border-box;
}
.leftBox > .leftitem {
  margin-bottom: 15px;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.rightBox > .rightitem {
  margin-bottom: 15px;
}
.merchants {
  width: 50%;
}
.tableBox {
  margin-top: 20px;
}
.servicename {
  width: 43%;
}
.servicename1 {
  width: 60%;
}
.servicelevel {
  width: 23.5%;
}
.width20 {
  width: 190px;
}
.red {
  color: #f9607d;
}
.blue {
  color: #01aaef;
}
.stitle {
  padding: 5px 0;
  font-size: 18px;
}
.green {
  background: #97c05c;
  color: #fff;
  padding: 0 5px;
  border-radius: 10px;
}
.hui {
  background: #888888;
  color: #fff;
  padding: 0 5px;
  border-radius: 10px;
}
.yellow {
  background: #ffe793 !important;
  color: #000;
  padding: 0 5px;
  border-radius: 10px;
}
.statistical {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #00152a;
  color: #fff;
  padding: 12px;
  box-sizing: border-box;
  .statisticalitem {
    flex: 1;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.445);
    font-size: 13px;
    line-height: 180%;
    &:nth-last-child(1) {
      border-right: none;
    }
    .red {
      color: #f9607d;
      font-size: 18px;
    }
    .blue {
      color: #01aaef;
      font-size: 18px;
    }
  }
}
// .BDname{
//   width: 20%;
// }
</style>